<template>
    <div>
        <Scroller :movieList="showingMovies" :loading="loadingShowingMovies" :title="'影院热映'" :link="'https://m.douban.com/movie/nowintheater?loc_id=108288'"></Scroller>
        <Scroller :movieList="topMovies" :loading="loadingTopMovies" :title="'豆瓣Top250'" :link="'https://m.douban.com/movie/watchonline'"></Scroller>
        <Scroller :movieList="latestMovies" :loading="loadingLatestMovies" :title="'新片速递'" :link="'https://m.douban.com/movie/latest'"></Scroller>
        <DiscoverNav>发现好电影</DiscoverNav>
        <TypesNav></TypesNav>
        <DownloadApp />
    </div>
</template>

<style lang="scss" scoped>

</style>

<script>
    import Scroller from '../components/Scroller';
    import DiscoverNav from '../components/DiscoverNav';
    import TypesNav from '../components/TypesNav';
    import DownloadApp from '../components/DownloadApp';

    import axios from 'axios';
    import fetch from '@/api.js';

    export default {
        components: {
            Scroller,
            DiscoverNav,
            TypesNav,
            DownloadApp
        },
        data() {
            return {
                showingMovies: [],
                topMovies: [],
                latestMovies: [],
                loadingShowingMovies: true,
                loadingTopMovies: true,
                loadingLatestMovies: true
            }
        },
        created() {
            this.fetchShowingMovies();
            this.fetchLatestMovies();
            this.fetchDoubanTopMovies();
        },
        methods: {
            fetchShowingMovies() {
                fetch.fetchShowingMovies()
                    .then(response => {
                        this.showingMovies = response.subjects;
                        this.loadingShowingMovies = false;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            fetchLatestMovies() {
                fetch.fetchLatestMovies()
                    .then(response => {
                        this.latestMovies = response.subjects;
                        this.loadingLatestMovies = false;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            fetchDoubanTopMovies() {
                fetch.fetchDoubanTopMovies()
                    .then(response => {
                        this.topMovies = response.subjects;
                        this.loadingTopMovies = false;
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }

</script>
